<!DOCTYPE html>  
<html>  
	<head>  
  		<title>签名生成工具</title>
  		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
		<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script> -->
		
	</head>  
	<body>
		<div id="app">
			<div class="card" style="margin: 50px;padding: 20px;">
		  		<div class="row g-3 needs-validation" novalidate>
					<div class="col-md-2">
					    <label for="validationCustom01" class="form-label">商户编码</label>
					    <input type="text" class="form-control" id="validationCustom01" v-model="formData.merchant_code" required>
					</div>
					<div class="col-md-4">
					    <label for="validationCustom02" class="form-label">秘钥</label>
					    <input type="text" class="form-control" id="validationCustom02" v-model="formData.secret" required>
					</div>
					<div class="col-md-3">
					    <label for="validationCustomUsername" class="form-label">随机数</label>
					    <div class="input-group has-validation">
					      <span class="input-group-text" id="inputGroupPrepend" @click="getRandom">生成随机数</span>
					      <input type="text" class="form-control" id="validationCustomUsername" v-model="formData.random">
					    </div>
					</div>
					<div class="col-md-3">
					    <label for="validationCustomUsername" class="form-label">时间戳</label>
					    <div class="input-group has-validation">
					      <span class="input-group-text" id="inputGroupPrepend" @click="getTimeStamp">生成时间戳</span>
					      <input type="text" class="form-control" id="validationCustomUsername" v-model="formData.timestamp">

					    </div>
					</div>
					<hr>
					<div class="col-md-12">
						<div class="row">
							<div class="col-md-4">
							    <input
							    	type="checkbox"
							    	id="imei"
							    	true-value="yes"
		  							false-value="no"
		  							v-model="checkedNames.imei">
								<label for="imei">设备号（IMEI）</label>
							</div>
							<div class="col-md-4">
								<input
							    	type="checkbox"
							    	id="type"
							    	true-value="yes"
		  							false-value="no"
		  							v-model="checkedNames.type">
								<label for="imei">类型（type）</label>
							</div>
							<div class="col-md-4">
								<input
							    	type="checkbox"
							    	id="month"
							    	true-value="yes"
		  							false-value="no"
		  							v-model="checkedNames.month">
								<label for="imei">月份（month）</label>
							</div>
							<div class="col-md-4">
								<input
							    	type="checkbox"
							    	id="page"
							    	true-value="yes"
		  							false-value="no"
		  							v-model="checkedNames.page">
								<label for="imei">当前页（page）</label>
							</div>
							<div class="col-md-4">
								<input
							    	type="checkbox"
							    	id="limit"
							    	true-value="yes"
		  							false-value="no"
		  							v-model="checkedNames.limit">
								<label for="imei">每页条数（limit）</label>
							</div>
							<div class="col-md-4">
								<input
							    	type="checkbox"
							    	id="freight_way_list"
							    	true-value="yes"
		  							false-value="no"
		  							v-model="checkedNames.freight_way_list">
								<label for="imei">货道列表（freight_way_list）</label>
							</div>
							<div class="col-md-4">
								<input
							    	type="checkbox"
							    	id="freight_way"
							    	true-value="yes"
		  							false-value="no"
		  							v-model="checkedNames.freight_way">
								<label for="imei">货道号（freight_way）</label>
							</div>
							<div class="col-md-4">
								<input
							    	type="checkbox"
							    	id="pickup_code"
							    	true-value="yes"
		  							false-value="no"
		  							v-model="checkedNames.pickup_code">
								<label for="imei">取货码（pickup_code）</label>
							</div>
							<div class="col-md-4">
								<input
							    	type="checkbox"
							    	id="pickup_code_list"
							    	true-value="yes"
		  							false-value="no"
		  							v-model="checkedNames.pickup_code_list">
								<label for="imei">取货码列表（pickup_code_list）</label>
							</div>
							<div class="col-md-4">
								<input
							    	type="checkbox"
							    	id="No"
							    	true-value="yes"
		  							false-value="no"
		  							v-model="checkedNames.No">
								<label for="imei">取货码货道号（No）</label>
							</div>
							<div class="col-md-4">
								<input
							    	type="checkbox"
							    	id="valid_time"
							    	true-value="yes"
		  							false-value="no"
		  							v-model="checkedNames.valid_time">
								<label for="imei">取货码失效时间（valid_time）</label>
							</div>
							<div class="col-md-4">
								<input
							    	type="checkbox"
							    	id="freight_way_type"
							    	true-value="yes"
		  							false-value="no"
		  							v-model="checkedNames.freight_way_type">
								<label for="imei">货道类型（freight_way_type）</label>
							</div>
							<div class="col-md-4">
								<input
								    type="checkbox"					
								    id="order"
								    true-value="yes"
			  						false-value="no"
			  						v-model="checkedNames.order">
								<label for="imei">单号（order）</label>
							</div>
							<div class="col-md-4">
								<input
							    	type="checkbox"
							    	id="dec_stock"
							    	true-value="yes"
		  							false-value="no"
		  							v-model="checkedNames.dec_stock">
								<label for="imei">是否扣减库存（dec_stock）</label>
							</div>
							<div class="col-md-4">
								<input
							    	type="checkbox"
							    	id="back_url"
							    	true-value="yes"
		  							false-value="no"
		  							v-model="checkedNames.back_url">
								<label for="imei">回调地址（back_url）</label>
							</div>
						</div>
					</div>



					<div class="col-md-6" v-if="checkedNames.imei =='yes'">
						<label for="form-imei" class="form-label">设备号（IMEI）</label>
					    <div class="input-group has-validation">
					      <input type="text" class="form-control" id="form-imei" v-model="formData.imei">

					    </div>
					</div>
					<div class="col-md-6" v-if="checkedNames.type =='yes'">
						<label for="form-type" class="form-label">类型（type）</label>
					    <div class="input-group has-validation">
					      <input type="text" class="form-control" id="form-type" v-model="formData.type">

					    </div>
					</div>
					<div class="col-md-6" v-if="checkedNames.month =='yes'">
						<label for="form-month" class="form-label">月份（month）</label>
					    <div class="input-group has-validation">
					      <input type="text" class="form-control" id="form-month" v-model="formData.month">

					    </div>
					</div>
					<div class="col-md-6" v-if="checkedNames.page =='yes'">
						<label for="form-page" class="form-label">当前页（page）</label>
					    <div class="input-group has-validation">
					      <input type="text" class="form-control" id="form-page" v-model="formData.page">

					    </div>
					</div>
					<div class="col-md-6" v-if="checkedNames.limit =='yes'">
						<label for="form-limit" class="form-label">每页条数（limit）</label>
					    <div class="input-group has-validation">
					      <input type="text" class="form-control" id="form-limit" v-model="formData.limit">

					    </div>
					</div>
					<div class="col-md-6" v-if="checkedNames.freight_way_list =='yes'">
						<label for="form-freight_way_list" class="form-label">货道列表（freight_way_list）</label>
					    <div class="input-group has-validation">
					      <input type="text" class="form-control" id="form-freight_way_list" v-model="formData.freight_way_list">

					    </div>
					</div>
					<div class="col-md-6" v-if="checkedNames.freight_way =='yes'">
						<label for="form-freight_way" class="form-label">货道号（freight_way）</label>
					    <div class="input-group has-validation">
					      <input type="text" class="form-control" id="form-freight_way" v-model="formData.freight_way">

					    </div>
					</div>
					<div class="col-md-6" v-if="checkedNames.pickup_code =='yes'">
						<label for="form-pickup_code" class="form-label">取货码（pickup_code）</label>
					    <div class="input-group has-validation">
					      <input type="text" class="form-control" id="form-pickup_code" v-model="formData.pickup_code">

					    </div>
					</div>
					<div class="col-md-6" v-if="checkedNames.pickup_code_list =='yes'">
						<label for="form-pickup_code_list" class="form-label">取货码列表（pickup_code_list）</label>
					    <div class="input-group has-validation">
					      <input type="text" class="form-control" id="form-pickup_code_list" v-model="formData.pickup_code_list">

					    </div>
					</div>
					<div class="col-md-6" v-if="checkedNames.No =='yes'">
						<label for="form-No" class="form-label">取货码货道号（No）</label>
					    <div class="input-group has-validation">
					      <input type="text" class="form-control" id="form-No" v-model="formData.No">

					    </div>
					</div>
					<div class="col-md-6" v-if="checkedNames.valid_time =='yes'">
						<label for="form-valid_time" class="form-label">取货码失效时间（valid_time）</label>
					    <div class="input-group has-validation">
					      <input type="text" class="form-control" id="form-valid_time" v-model="formData.valid_time">

					    </div>
					</div>
					<div class="col-md-6" v-if="checkedNames.freight_way_type =='yes'">
						<label for="form-freight_way_type" class="form-label">货道类型（freight_way_type）</label>
					    <div class="input-group has-validation">
					      <input type="text" class="form-control" id="form-freight_way_type" v-model="formData.freight_way_type">

					    </div>
					</div>
					<div class="col-md-6" v-if="checkedNames.order =='yes'">
						<label for="form-order" class="form-label">单号（order）</label>
					    <div class="input-group has-validation">
					      <input type="text" class="form-control" id="form-order" v-model="formData.order">

					    </div>
					</div>
					<div class="col-md-6" v-if="checkedNames.dec_stock =='yes'">
						<label for="form-dec_stock" class="form-label">是否扣减库存（dec_stock）</label>
					    <div class="input-group has-validation">
					      <input type="text" class="form-control" id="form-dec_stock" v-model="formData.dec_stock">

					    </div>
					</div>
					<div class="col-md-6" v-if="checkedNames.back_url =='yes'">
						<label for="form-back_url" class="form-label">回调地址（back_url）</label>
					    <div class="input-group has-validation">
					      <input type="text" class="form-control" id="form-back_url" v-model="formData.back_url">

					    </div>
					</div>
					<div class="col-12">
					    <button class="btn btn-primary" type="submit" @click="get_sign()">生成签名</button>
					</div>
					<hr>
					<div class="col-md-12">
						<label for="form-str" class="form-label">拼接的字符串</label>
					    <div class="input-group has-validation">
					      <textarea type="text" class="form-control" id="form-str" v-model="formData.str" style="height: 100px;"></textarea>
					    </div>
					</div>
					<div class="col-md-12">
						<label for="form-str" class="form-label">URL编码</label>
					    <div class="input-group has-validation">
					      <textarea type="text" class="form-control" id="form-str" v-model="formData.urlcode" style="height: 100px;"></textarea>
					    </div>
					</div>
					<div class="col-md-12">
						<label for="form-sign" class="form-label">生成的签名</label>
					    <div class="input-group has-validation">
					      <input type="text" class="form-control" id="form-sign" v-model="formData.sign">

					    </div>
					</div>
				</div>
			</div>
		</div>
		<!-- vue3-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script type="module">
		  	import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
		  	createApp({
			    setup() {
			      	const formData = ref({
			      		merchant_code: '',
			      		secret: '',
			      		random: '',
			      		timestamp: ''
			      	})

			      	const checkedNames = ref([])

			      	return {
			        	formData,
			        	checkedNames
			      	}

			      	onMounted(()=>{

				  	})
			    },
			    methods: {  
				    get_sign() {
				  		console.log(this.formData)
				  		 // 发起POST请求  
				  		var that = this
					    axios.post('/tool/sign', this.formData)  
					    .then(function (res) {  
					    	//console.log(res.data)
					    	//console.log(res.data.code)
					    	if(res.data.code == 1){
					    		// 请求成功处理逻辑  
						        //console.log(res.data.data) 
						        that.formData.str = ''
						        that.formData.str = res.data.data.str
						        that.formData.urlcode= ''
						        that.formData.urlcode = res.data.data.urlcode
						        that.formData.sign = ''
						        that.formData.sign = res.data.data.sign
					    	}else{
					    		alert(res.data.msg)
					    	}
					    })  
					    .catch(function (error) {  
					        // 请求失败处理逻辑  
					        console.error(error);  
					    }); 
				  	},
				  	getRandom(){
				  		var randomNum = Math.floor(Math.random() * 1000000000000) //生成12位的随机数  
				  		this.formData.random = randomNum
				  	},
				  	getTimeStamp(){
				  		var timestampInSeconds = Math.floor(Date.now() / 1000)
				  		this.formData.timestamp = timestampInSeconds
				  	}
				}
			}).mount('#app')
		</script>  
	</body>  
</html>